<template>
	<!-- 头部 -->
	<view>
		<view style="display: flex;justify-content: space-between;">
			<view style="margin: 15px 15px 5px 15px;font-weight: 600;font-size: 15px;color: #25406e">
				<text>客群画像</text>
			</view>
		</view>
		<text style="margin-left: 15px;font-size: 10px;display: flex;color: #a7a7a7;font-weight: 600;">进店男性客流
			<text style="color: #515a9c">{{briefingData.maleNumber||0}}</text>人,
			<text style="font-size: 10px;color: #a7a7a7;font-weight: 600;">占比
				<text style="color: #515a9c">{{malePercentage.toFixed(2)}}%,</text>
			</text>
			<text style="font-size: 10px;color: #a7a7a7;font-weight: 600;">进店女性客流
				<text style="color: #515a9c">{{briefingData.wifeNumber||0}}</text>人,
				<text style="font-size: 10px;color: #a7a7a7;font-weight: 600;">占比
					<text style="color: #515a9c">{{femalePercentage.toFixed(2)}}%,</text>
				</text>
			</text>
		</text>
		<text style="margin-left: 15px;font-size: 10px;display: flex;color: #a7a7a7;font-weight: 600;">进店客流中
			<text style="color: #515a9c">21-30</text>岁年龄段,
			<text style="font-size: 10px;color: #a7a7a7;font-weight: 600;">
				<text style="color: #515a9c">400</text>人,
			</text>
			<text style="font-size: 10px;color: #a7a7a7;font-weight: 600;">数量最多,占比
				<text style="color: #515a9c">47%</text>,
			</text>
		</text>
		<view class="charts-box">
			<l-echart ref="chart" class="charts-box"></l-echart>
		</view>
	</view>

</template>

<script>
	import {
		findShopStatisticsColony
	} from '@/network/report.js';
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				briefingData: {},
				current: {
					organId: uni.getStorageSync('organId'),
					chooseDate: ""
				},
				time: [],
				today: [],
				yesterday: [],
				malePercentage: "",
				femalePercentage: "",
			}
		},
		created() {
			this.getServerData();
		},
		mounted() {},
		methods: {
			clear() {
				this.time = []
				this.today = []
				this.yesterday = []
				this.malePercentage = "",
					this.femalePercentage = ""
			},
			getServerData() {
				this.clear()
				this.current.chooseStartTime = uni.getStorageSync('startTime')
				this.current.chooseEndTime = uni.getStorageSync('endTime')
				findShopStatisticsColony(this.current).then(res => {
					const code = res.data.code;
					if (code === 200) {
						this.briefingData = res.data.result
						// this.briefingData.forEach((item, index) => {
						// 	// this.time.push(item.time)
						// 	// this.today.push(item.inboundNewFlow)
						// 	// this.yesterday.push(item.inboundLaterFlow)
						// })
						this.$refs.chart.init(echarts, chart => {
							let option = {
								tooltip: {
									trigger: 'item',
									formatter: '{b}: {c} ({d}%)'
								},
								// legend: {
								//   data: [
								//     'Direct',
								//     'Marketing',
								//     'Search Engine',
								//     'Email',
								//     'Union Ads',
								//     'Video Ads',
								//     'Baidu',
								//     'Google',
								//     'Bing',
								//     'Others'
								//   ]
								// },
								series: [{
										name: 'Access From',
										type: 'pie',
										selectedMode: 'single',
										radius: [0, '30%'],
										label: {
											position: 'inner',
											fontSize: 10
										},
										labelLine: {
											show: false
										},
										data: [{
												value: this.briefingData.wifeNumber,
												name: '女生'
											},
											{
												value: this.briefingData.maleNumber,
												name: '男生'
											},
											// { value: 679, name: 'Marketing', selected: true }
										]
									},
									{
										// name: 'Access From',
										type: 'pie',
										radius: ['45%', '60%'],
										labelLine: {
											length: 30
										},
										label: {
											formatter: '{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
											backgroundColor: '#F6F8FC',
											borderColor: '#8C8D8E',
											borderWidth: 0,
											borderRadius: 10,
											rich: {
												// a: {
												//   color: '#6E7079',
												//   lineHeight: 10,
												//   align: 'center'
												// },
												hr: {
													borderColor: '#8C8D8E',
													width: '100%',
													borderWidth: 0,
													height: 0
												},
												b: {
													color: '#4C5058',
													fontSize: 10,
													fontWeight: 'bold',
													lineHeight: 1
												},
												per: {
													color: '#fff',
													backgroundColor: '#4C5058',
													padding: [1, 1],
													borderRadius: 2
												}
											}
										},
										data: [{
												value: 0,
												name: ''
											},
											// {
											// 	value: 335,
											// 	name: '31-40岁'
											// },
											// {
											// 	value: 310,
											// 	name: '41-50岁'
											// },
											// {
											// 	value: 251,
											// 	name: '51-60岁'
											// },
											// {
											// 	value: 135,
											// 	name: '61岁以上'
											// },
											// {
											// 	value: 102,
											// 	name: '11-20岁'
											// }
										]
									}
								]
							};
							chart.setOption(option);

						});
						// 男性人数
						const maleCount = this.briefingData.maleNumber;
						// 女性人数
						const femaleCount = this.briefingData.wifeNumber;
						// 总人数是男性和女性的总和
						const totalCount = maleCount + femaleCount;

						// 计算占比
						this.malePercentage = (maleCount / totalCount) * 100;
						this.femalePercentage = (femaleCount / totalCount) * 100;
						// uni.removeStorageSync('startTime');
						// uni.removeStorageSync('endTime');
					} else {
						// uni.removeStorageSync('startTime');
						// uni.removeStorageSync('endTime');
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			},
		}
	}
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
	}
</style>